<template>
  <el-aside width="200px">
    <!-- bg-hex-7dd3fc  -->
    <div class="w-full h-full menu">
      <el-row>
        <el-col>
          <el-menu
            :default-active="defaultActive"
            class="w-full"
            router
            @open="handleOpen"
            @close="handleClose">
            <div v-for="(item, index) in Menu" :key="index">
              <el-sub-menu v-if="item.children?.length" :index="item.path">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{ item.title }}</span>
                </template>

                <el-menu-item
                  v-for="(group, groupIndex) in item.children"
                  :key="groupIndex"
                  :index="group.path">
                  {{ group.title }}
                </el-menu-item>
              </el-sub-menu>

              <el-menu-item v-else :key="index" :index="item.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </el-aside>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { menu } from '../mock/menu'

const Menu = reactive(menu)

const route = useRoute()

// const router = useRouter() 方法
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, 1, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, 2, keyPath)
}

const defaultActive = ref(window.location.hash.slice(1))

watch(
  () => route.path,
  (newVal, oldVal) => {
    defaultActive.value = window.location.hash.slice(1)
  },
  {
    deep: true,
  },
)
// const text = async () => {
//   setTimeout(() => {
//     console.log(1)
//   }, 0)
//   await Promise.resolve().then(() => console.log(2))

//   new Promise<void>(resolve => {
//     console.log(3)
//     for (let i = 0; i < 10000; i++) {
//       i === 9999 && resolve()
//     }
//     console.log(4)
//   }).then(() => {
//     console.log(5)
//   })

//   await new Promise<void>((resolve, o) => {
//     console.log(6)
//     resolve()
//   }).then(() => {
//     console.log(7)
//   })

//   console.log(8)
// }

// text()
</script>

<style lang="scss" scoped>
.menu {
  border-right: 1px solid #e5e5e5ff;
}

:deep(.el-menu) {
  border-right: none;

  text-align: center;
}
</style>
